<template>
  <div style="width: 100%; min-width: 1200px; min-height: 100%; background: rgba(244, 246, 250, 1)">
    <Navbar :sourceType="1" ref="child" />
    <div style="width: 1200px; margin: 0 auto">
      <div class="mt24" style="display: flex">
        <div class="box mr24" style="width: 762px; height: 188px; display: flex">
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 174px;
              border-right: 1px dashed rgba(225, 225, 225, 1);
            "
          >
            <img :src="avatar" style="width: 66px; height: 66px; flex-shrink: 0; border-radius: 50%; overflow: hidden" />
            <div v-if="roleName" class="ta-center mt16 role">{{ roleName }}</div>
            <div v-else style="width: 120px; height: 20px"></div>
            <div class="fs18 fw500 ta-center mt16" style="color: rgba(60, 61, 67, 1)">你好，{{ name }}</div>
          </div>
          <div class="pl24">
            <div style="display: flex">
              <img src="../../assets/indexImg/yonggongdanwei@2x.png" alt style="width: 50px; height: 50px" />
              <div v-if="operationMenus.length > 0" class="ml16">
                <div class="fs18 fw500" style="color: rgba(85, 86, 93, 1)" @click="selectCompany(firstCompany)">
                  {{ firstCompany ? firstCompany.name : "暂无用工单位" }}
                </div>
                <div style="display: flex; align-items: center; color: var(--primary)">
                  <SelectCompanyGroup ref="selectVal" class="mr8 swap" showSelect="切换公司" @selectCompany="() => goEntry()" />
                  <a-icon type="swap" @click="handleClickChange" />
                </div>
              </div>
            </div>
            <div class="mt24" style="display: flex; width: 518px">
              <div style="flex: 1">
                <div class="fs24 fw500" style="color: rgba(85, 86, 93, 1)">{{ empInfo.countOnJob || 0 }}</div>
                <div class="fs14" style="color: rgba(166, 168, 180, 1)">在职员工数</div>
              </div>
              <div style="flex: 1">
                <div class="fs24 fw500" style="color: rgba(85, 86, 93, 1)">{{ empInfo.countPre || 0 }}</div>
                <div class="fs14" style="color: rgba(166, 168, 180, 1)">待入职员工</div>
              </div>
              <div style="flex: 1">
                <div class="fs24 fw500" style="color: rgba(85, 86, 93, 1)">{{ empInfo.countLeaveHas || 0 }}</div>
                <div class="fs14" style="color: rgba(166, 168, 180, 1)">已离职员工</div>
              </div>
            </div>
          </div>
        </div>
        <div class="box banner" style="width: 414px; height: 188px"></div>
      </div>
      <div class="box mt24">
        <div class="title">快捷入口</div>
        <div class="mt24">
          <div style="display: flex">
            <div
              v-for="li in shortcuts"
              :key="li.title"
              class="pv12"
              style="
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 118px;
                cursor: pointer;
                border-radius: 8px 8px 0 0;
              "
              :style="{ background: currentItem.title === li.title ? 'rgba(248, 248, 255, 1)' : '#fff' }"
              @click="currentItem = li"
            >
              <img :src="li.icon" alt="" style="width: 48px; height: 48px" />
              <div class="mt8" :style="{ color: currentItem.title === li.title ? 'var(--primary)' : 'rgba(85, 86, 93, 1)' }">
                {{ li.title }}
              </div>
              <div
                v-if="currentItem.title === li.title"
                class="mt12"
                style="width: 44px; height: 4px; border-radius: 2px; background: var(--primary)"
              ></div>
            </div>
          </div>
          <div>
            <template v-for="li in shortcuts">
              <div
                v-if="currentItem.title === li.title"
                :key="li.title"
                class="p24"
                style="display: flex; border-radius: 0 0 8px 8px; background: rgba(248, 248, 255, 1)"
              >
                <template v-for="(subLi, subLiIdx) in li.items">
                  <div
                    v-if="showSubItem(subLi)"
                    :key="subLi.title"
                    class="ph24 pt24 pb12 bgc-white moduleItem"
                    :style="{ 'margin-left': subLiIdx === 0 ? '0' : '24px' }"
                  >
                    <template v-if="subLi.items.length > 0">
                      <div style="display: flex">
                        <img :src="subLi.icon" alt="" class="mr16" style="display: block; width: 50px; height: 50px" />
                        <div class="pv6">
                          <div class="fs16 fw500" style="height: 16px; line-height: 16px; color: rgba(85, 86, 93, 1)">
                            {{ subLi.title }}
                          </div>
                          <div class="mt8" style="height: 14px; line-height: 14px; color: rgba(166, 168, 180, 1)">{{ subLi.desc }}</div>
                        </div>
                      </div>
                      <div class="mt16">
                        <a-button
                          v-for="(btn, btnIdx) in subLi.items"
                          :key="btn.title"
                          :style="{
                            'margin-right': btnIdx % 2 === 0 ? '24px' : '0px',
                            width: '138px',
                            'margin-bottom': '12px'
                          }"
                          @click="onBtnClick(btn)"
                          >{{ btn.title }}</a-button
                        >
                      </div>
                    </template>
                    <div v-else class="pb12" style="display: flex; cursor: pointer" @click="onBtnClick(subLi)">
                      <img :src="subLi.icon" alt="" class="mr16" style="display: block; width: 50px; height: 50px" />
                      <div class="pv6">
                        <div class="fs16 fw500" style="height: 16px; line-height: 16px; color: rgba(85, 86, 93, 1)">{{ subLi.title }}</div>
                        <div class="mt8" style="height: 14px; line-height: 14px; color: rgba(166, 168, 180, 1)">{{ subLi.desc }}</div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="mt24 pb24" style="display: flex">
        <div class="box mr24" style="width: 669px">
          <div class="title" style="display: flex; align-items">
            <div class="mr4">消息通知</div>
            <a-tooltip title="仅展示您管理范围内的数据">
              <a-icon type="question-circle" theme="filled" style="color: rgba(198, 198, 198, 1); font-size: 14px; padding-top: 2px" />
            </a-tooltip>
          </div>
          <div v-if="noticeSource" class="mt14">
            <NoticeList :source="noticeSource" :companyIds="companyIds" />
          </div>
          <a-empty v-else class="pv24"></a-empty>
        </div>
        <div class="box" style="width: 505px" :style="{ height: showZhaopin ? '200px' : '268px' }">
          <div class="title" style="display: flex; align-items">
            <div class="mr4">今日招聘</div>
            <a-tooltip title="仅展示您管理范围内的数据">
              <a-icon type="question-circle" theme="filled" style="color: rgba(198, 198, 198, 1); font-size: 14px; padding-top: 2px" />
            </a-tooltip>
          </div>
          <div
            v-if="showZhaopin"
            class="mt24 pb24"
            style="display: flex; align-items: center; justify-content: space-around; border-bottom: "
            :style="{ 'border-bottom': perStrs.includes('recruitment:people:query') ? '1px solid #e8e8e8' : 'none' }"
          >
            <div
              v-if="perStrs.includes('recruitment:management:query')"
              style="cursor: pointer"
              @click="jumpToPage('/recruitment/management')"
            >
              <div class="fs24 fw500" style="color: rgba(85, 86, 93, 1)">{{ zhaopinInfo.recruitInfoCount }}</div>
              <div class="fs14" style="color: rgba(166, 168, 180, 1)">在招职位</div>
            </div>
            <div v-if="perStrs.includes('recruitment:talent:query')" style="cursor: pointer" @click="jumpToPage('/recruitment/talent')">
              <div class="fs24 fw500" style="color: rgba(85, 86, 93, 1)">{{ zhaopinInfo.talentCount }}</div>
              <div class="fs14" style="color: rgba(166, 168, 180, 1)">人才库人员</div>
            </div>
          </div>
          <a-empty v-else :image="emptyImg" class="pv24">
            <div
              v-if="perStrs.includes('recruitment:people:query')"
              slot="description"
              class="ta-center"
              style="color: var(--primary); height: 48px; line-height: 48px; cursor: pointer"
              @click="jumpToPage('/recruitment/people')"
            >
              查看投递记录
              <a-icon type="right" class="ml4" />
            </div>
            <div slot="description" class="ta-center">暂无权限</div>
          </a-empty>
          <div
            v-if="showZhaopin && perStrs.includes('recruitment:people:query')"
            class="ta-center"
            style="color: var(--primary); height: 48px; line-height: 48px; cursor: pointer"
            @click="jumpToPage('/recruitment/people')"
          >
            查看投递记录
            <a-icon type="right" class="ml4" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Navbar from "@/layout/components/navbar";
import NoticeList from "@/components/notice";
import { buildShortcuts } from "./funcs";
import { mapGetters, mapState } from "vuex";
import { getCurrentUserInfo } from "@/api/company/news";
import SelectCompanyGroup from "@/components/SelectCompany/dashboard";
import { getEmpInfoCountReq, jfHomePageNoticeReq, selectCancelCountBySiteReq } from "./api";
export default {
  name: "",
  components: { Navbar, NoticeList, SelectCompanyGroup },
  mixins: [],
  props: {},
  data() {
    return {
      shortcuts: [],
      currentItem: null,
      roleName: "",
      empInfo: {},
      noticeSource: null,
      zhaopinInfo: null,
      emptyImg: require("./images/empty.png")
    };
  },
  computed: {
    ...mapGetters(["name", "avatar", "permissions_menu", "permissions_menu_urls"]),
    ...mapState(["site", "auth", "hr"]),
    perStrs() {
      try {
        return this.auth.permissions.permissionStringList;
      } catch (err) {
        return [];
      }
    },
    showZhaopin() {
      return (
        (this.perStrs.includes("recruitment:management:query") ||
          this.perStrs.includes("recruitment:talent:query") ||
          this.perStrs.includes("recruitment:zhinengtuijian:query")) &&
        this.zhaopinInfo
      );
    },
    operationMenus() {
      const menus = this.permissions_menu.filter((item) => item.url !== "/dashboard" && item.level > 1);
      return menus.map((item) => item.url);
    },
    currentItems() {
      return this.site.currentItems;
    },
    firstCompany() {
      return this.currentItems[0];
    },
    companyId() {
      return this.firstCompany ? this.firstCompany.id : null;
    },
    companyIds() {
      try {
        return this.hr.companyList.map((item) => item.id);
      } catch (err) {
        return [];
      }
    }
  },
  watch: {
    companyId: {
      handler(newVal) {
        if (newVal) {
          getEmpInfoCountReq(newVal).then((res) => {
            this.empInfo = res.data;
          });
        }
      },
      immediate: true
    }
  },
  created() {
    this.shortcuts = buildShortcuts().filter((item) => this.showItem(item));
    this.currentItem = this.shortcuts[0];
    getCurrentUserInfo()
      .then((res) => {
        this.roleName = res.data.roleName;
      })
      .catch((err) => {
        console.log(err);
      });
    this.initInfo();
  },
  mounted() {},
  methods: {
    showItem(item) {
      let flag = false;
      for (let i = 0; i < item.items.length; i++) {
        flag = this.showSubItem(item.items[i]);
        if (flag) {
          break;
        }
      }
      return flag;
    },
    showSubItem(item) {
      if (item.items.length > 0) {
        const shows = item.items.filter((li) => {
          const theMenu = li.menu || li.url;
          return this.permissions_menu_urls.includes(theMenu);
        });
        return shows.length > 0;
      } else {
        const theMenu = item.menu || item.url;
        return this.permissions_menu_urls.includes(theMenu);
      }
    },
    jumpToPage(url) {
      this.$router.push(url);
    },
    initInfo() {
      jfHomePageNoticeReq()
        .then((res) => {
          this.noticeSource = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
      selectCancelCountBySiteReq()
        .then((res) => {
          this.zhaopinInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goEntry() {
      if (this.operationMenus.includes("/staff/employee")) {
        this.$router.push("/staff/employee");
        this.$store.commit("navtab/updateSelectedKeys", ["/staff/employee"]);
        this.$store.commit("navtab/updateOpenKeys", ["/staff"]);
      } else {
        this.$router.push(this.operationMenus[0]);
        this.$store.commit("navtab/updateSelectedKeys", [this.operationMenus[0]]);
        this.$store.commit("navtab/updateOpenKeys", [`/${this.operationMenus[0].split("/")[1]}`]);
      }
    },
    handleClickChange() {
      this.$refs.selectVal.handleClickChange(true);
    },
    selectCompany(theCompany) {
      this.$store.dispatch("onCompanyClick", theCompany);
      this.goEntry(); // 跳转
    },
    onBtnClick(item) {
      // 先判断是否已经选择用工单位
      const theMenu = item.menu || item.url;
      if (this.permissions_menu_urls.includes(theMenu)) {
        if (this.companyIds.length > 0) {
          // 菜单展开
          this.$store.commit("navtab/updateSelectedKeys", [theMenu]);
          this.$store.commit("navtab/updateOpenKeys", [`/${theMenu.split("/")[1]}`]);
          const sc = item.url.includes("?") ? `&operateFromShortcut=${item.type}` : `?operateFromShortcut=${item.type}`;
          this.$router.push(`${item.url}${sc}`);
        } else {
          this.$message.warning("未查询到用工单位，请先创建用工单位");
        }
      } else {
        this.$message.warning("您没有该权限，请联系管理员");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 24px;
}
.title {
  position: relative;
  height: 18px;
  line-height: 18px;
  font-size: 18px;
  color: rgba(60, 61, 67, 1);
  font-weight: 500;
  padding-left: 16px;
  &:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    left: 0;
    top: 0;
    background: var(--primary);
  }
}
.role {
  width: 100px;
  padding: 0 12px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: var(--primary10);
  border-radius: 2px;
  height: 20px;
  line-height: 20px;
}
.moduleItem {
  width: 352px;
  height: auto;
  border-radius: 8px;
}
.swap {
  ::v-deep .font-title {
    font-size: 14px !important;
    color: var(--primary) !important;
    font-weight: normal !important;
    line-height: 14px;
  }
}
.banner {
  background-image: url("./images/banner.png");
  background-size: cover;
}
</style>
